<template>
    <div>
        <div class="row">

        </div>
        <el-table :data="tableData" height="65vh" style="width: 100%" @sort-change="sortchange">
            <el-table-column prop="ID" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :page-size="Number(limit)" layout="prev, pager, next"
            :total="count"></el-pagination>

    </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import {
    asyncselectvipdata,
} from "../../../api/index";
import { onMounted, ref } from "vue";
import TuyaiotModel from "../../../mysql_interface/tuyaiotmodel";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

const sortable = ref("DESC");
const limit = ref(20);
const offset = ref(0);
const like = ref("");
const tableData = ref<Studycodemodel.Ivipdata[]>([]);
const count = ref(0)

onMounted(() => {
    start()
})



async function start() {
    try {
        let z: [keyof TuyaiotModel.ITorganize, any] | undefined;
        if (like.value) {
            z = ["name", like.value];
        }
        const data = await asyncselectvipdata({
            _limit: limit.value,
            _offset: offset.value,
            _like: z,

        });
        tableData.value = data.rows;
        count.value = data.count;
    } catch (e: any) {
        ElMessage.error(e);
    }
}
function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}



function sortchange(row: any) {
    const { prop, order } = row;
    if (order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}


</script>
  